<template>
    <div id="CarbonTrading">
        
        <div class="top_content">
            <div class="title">
                <h1>碳交易</h1>
                <p>Carbon Trading</p>
            </div>
        </div>
        
        <div class="mid_content clearfix">
            <div class="mid_content_left">
                <el-row class="tac">
                    <el-col :span="18">
                    <h5 class="mb-2">碳交易</h5>
                    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > 
                        <el-menu-item index="1" @click="toTree('1')">
                            <el-icon><document /></el-icon>
                            <span>交易市场今日行情</span>
                        </el-menu-item>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>交易的产品</span>
                            </template>
                            <el-menu-item index="2-1"  @click="toTree('2-1')">CCER交易</el-menu-item>
                            <el-menu-item index="2-2"  @click="toTree('2-2')">CEA交易</el-menu-item>
                            <el-menu-item index="2-3"  @click="toTree('2-3')">碳信用-企业</el-menu-item>
                            <el-menu-item index="2-4"  @click="toTree('2-4')">碳积分-个人</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                    </el-col>
                </el-row>
            </div>
            <div class="mid_content_right">
                <div class="content1" v-show="treeIndex == '1'">
                    <div class="leftTitle">交易市场今日行情</div>
                    <ul class="clearfix" style="margin-left:-50px">
                        <li :class="contIndex== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList" :key="item.id" @click="contIndex = index">
                            {{item}}
                        </li>
                    </ul>
                    <div class="echarts_box clearfix">
                        <div class="first_e" id="myChart1" style="width:600px;height:300px"></div>
                        <div class="first_e" id="myChart2" style="width:500px;height:300px"></div>
                    </div>
                    <div class="leftTitle">现货交易数据<span class="floatRight moreColor">查看更多数据</span></div>
                    <div class="jiaoyi">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="Date" width="180" />
                            <el-table-column prop="name" label="Name" width="180" />
                            <el-table-column prop="address" label="Address" />
                        </el-table>
                    </div>
                    <div class="leftTitle">远期交易数据<span class="floatRight moreColor">查看更多数据</span></div>
                    <div class="jiaoyi">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="Date" width="180" />
                            <el-table-column prop="name" label="Name" width="180" />
                            <el-table-column prop="address" label="Address" />
                        </el-table>
                    </div>
                </div>
                <div class="content2" v-if="treeIndex == '2-1'">
                    <div class="leftTitle">CCER交易</div>
                    <ul class="clearfix" style="margin-left:-50px">
                        <li :class="contIndex2== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList2" :key="item.id" @click="contIndex2 = index">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="content2" v-if="treeIndex == '2-2'">
                    <div class="leftTitle">CEA交易</div>
                    <ul class="clearfix" style="margin-left:-50px">
                        <li :class="contIndex2== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList2" :key="item.id" @click="contIndex2 = index">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="content2" v-if="treeIndex == '2-3'">
                    <div class="leftTitle">碳信用-企业</div>
                    <ul class="clearfix" style="margin-left:-50px">
                        <li :class="contIndex2== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList2" :key="item.id" @click="contIndex2 = index">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="content2" v-if="treeIndex == '2-4'">
                    <div class="leftTitle">碳积分-个人</div>
                    <ul class="clearfix" style="margin-left:-50px">
                        <li :class="contIndex2== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList2" :key="item.id" @click="contIndex2 = index">
                            {{item}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        tableData:[{
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },],
        tabList:['协商议价','现货远期','定价转让','一级拍卖','CCER'],
        contIndex:0,
        contIndex2:0,
        tabList2:['每日概况','月度概况','年度概况'],
        treeIndex:'1',
        myChart1:null,
        lineCharts:{
            title: { text: "行情信息" },
            tooltip: {},
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',

                data: ['深圳', '北京', '上海', '广东', '湖北','重庆','四川','福建','天津'],
                icon: 'rect'
            },
            xAxis: {
                // type: 'date',
                // boundaryGap: ['2021-01-01', '2022-06-22'],
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {},
            series: [
                {
                    name: '深圳',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '北京',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '上海',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '广东',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '湖北',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                },
                {
                    name: '重庆',
                    type: 'line',
                    stack: 'Total',
                    data: [123, 542, 454, 344, 934, 430, 1453]
                },
                {
                    name: '四川',
                    type: 'line',
                    stack: 'Total',
                    data: [340, 563, 101, 452, 785, 120, 453]
                },
                {
                    name: '福建',
                    type: 'line',
                    stack: 'Total',
                    data: [340, 563, 101, 452, 785, 120, 644]
                },
                {
                    name: '天津',
                    type: 'line',
                    stack: 'Total',
                    data: [637, 454, 125, 452, 785, 214, 374]
                },
            ],
        },
        data2:[
            {
                name: 'Apples',
                value: 70
            },
            {
                name: 'Strawberries',
                value: 68
            },
            {
                name: 'Bananas',
                value: 48
            },
            {
                name: 'Oranges',
                value: 40
            },
            {
                name: 'Pears',
                value: 32
            },
            {
                name: 'Pineapples',
                value: 27
            },
            {
                name: 'Grapes',
                value: 18
        }],
        lineCharts2:{
            title: [
                {
                    text: '碳交易数据饼图',
                    left: 'center'
                },
                {
                    subtext: '碳交易量',
                    left: '25%',
                    top: '75%',
                    textAlign: 'center'
                },
                {
                    subtext: '碳交易额',
                    left: '75%',
                    top: '75%',
                    textAlign: 'center'
                },
            ],
            series: [
                {
                    type: 'pie',
                    radius: '25%',
                    center: ['50%', '50%'],
                    data:  [{
                            name: 'Apples',
                            value: 70
                        },
                        {
                            name: 'Strawberries',
                            value: 68
                        },
                        {
                            name: 'Bananas',
                            value: 48
                        },
                        {
                            name: 'Oranges',
                            value: 40
                        },
                        {
                            name: 'Pears',
                            value: 32
                        },
                        {
                            name: 'Pineapples',
                            value: 27
                        },
                        {
                            name: 'Grapes',
                            value: 18
                    }],
                    label: {
                        position: 'outer',
                        alignTo: 'none',
                        bleedMargin: 5
                    },
                    left: 0,
                    right: '50%',
                    top: 0,
                    bottom: 0
                },
                {
                    type: 'pie',
                    radius: '25%',
                    center: ['50%', '50%'],
                    data:  [
                        {
                            name: 'Apples',
                            value: 70
                        },
                        {
                            name: 'Strawberries',
                            value: 68
                        },
                        {
                            name: 'Bananas',
                            value: 48
                        },
                        {
                            name: 'Oranges',
                            value: 40
                        },
                        {
                            name: 'Pears',
                            value: 32
                        },
                        {
                            name: 'Pineapples',
                            value: 27
                        },
                        {
                            name: 'Grapes',
                            value: 18
                    }],
                    label: {
                        position: 'outer',
                        alignTo: 'labelLine',
                        bleedMargin: 5
                    },
                    left: '50%',
                    right: 0,
                    top: 0,
                    bottom: 0
                },
            ]
        },
    }
  },
  methods:{
    load(){

    },
    toDetail(index){
      this.$router.push({path:'articleRead',query:{back:'/'}});
    },
    toMore(){

    },
    toTree(li){
        this.treeIndex = li;
        if(li == 1){
            this.drawLine();
            this.drawLine2();
        }
    },
    drawLine(){
        let base = +new Date(1968, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let date = [];
        let data = [Math.random() * 300];
        for (let i = 1; i < 20000; i++) {
            var now = new Date((base += oneDay));
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        if (!this.myChart1) {
            console.log(123)
            this.myChart1 = this.$echarts.init(document.getElementById('myChart1'));
            // window.addEventListener("resize", () => {
            //     this.myChart1.resize();
            // });
        }else{
            this.myChart1.clear();
        }
        
        this.lineCharts.series = this.lineCharts.series;
        // 绘制图表
        this.myChart1 && this.myChart1.setOption(this.lineCharts);
        // this.myChart1.resize();
    },
    drawLine2(){
        if (!this.myChart2) {
            this.myChart2 = this.$echarts.init(document.getElementById('myChart2'));
            // window.addEventListener("resize", () => {
            //     this.echartsLine.resize();
            // });
        }else{
            this.myChart2.clear();
        }
        this.lineCharts2 = this.lineCharts2
        // 绘制图表
        this.myChart2 && this.myChart2.setOption(this.lineCharts2);
        this.myChart2.resize();
    },
  },
  mounted() {
    window.scrollTo(0,0);
    this.drawLine()
    this.drawLine2()
    },
}
</script>


<style scoped>
#AboutUs{
    position: relative;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}

ul{
    list-style: none;

}
.normalLi{
    padding: 10px 20px;
    border: 1px solid #efefef;
    border-radius: 4px;
    color:#666;
    font-size: 14px;
    margin-left: 10px;
    margin-block: 10px;
    float: left;
    width: auto;
}
.nowsli{
    background: #333;
    color:#fff;
}
.normalLi:hover{
    cursor: pointer;
}
#myChart1,#myChart2{
    float: left;
    width:500px;
    height:300px;
}
</style>